<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>BUG音乐</title>

  <style>
    body,
    ul,
    dl,
    dd {
      margin: 0px;
      padding: 0px;
    }

    .wrap {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: url('images/bg.jpg') no-repeat;
      background-size: 100% 100%;
    }

    .play_wrap {
      width: 16rem
        /* 800/50 */
      ;
      height: 10.88rem
        /* 544/50 */
      ;
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -8rem
        /* 400/50 */
      ;
      margin-top: -5.44rem
        /* 272/50 */
      ;
      /* background-color: #f9f9f9; */
    }

    .search_bar {
      height: 1.2rem
        /* 60/50 */
      ;
      background-color: #1eacda;
      overflow: hidden;
      border-top-left-radius: .08rem
        /* 4/50 */
      ;
      border-top-right-radius: .08rem
        /* 4/50 */
      ;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      z-index: 11;
    }

    .search_bar img {
      margin-left: .46rem
        /* 23/50 */
      ;
    }

    .search_bar input {
      margin-right: .46rem
        /* 23/50 */
      ;
      width: 5.92rem
        /* 296/50 */
      ;
      height: .68rem
        /* 34/50 */
      ;
      border-radius: .34rem
        /* 17/50 */
      ;
      border: 0px;
      background: url('images/zoom.png') 5.3rem
        /* 265/50 */
        center no-repeat rgba(255, 255, 255, 0.45);
      text-indent: .3rem
        /* 15/50 */
      ;
      outline: none;
    }

    .center_con {
      height: 8.7rem
        /* 435/50 */
      ;
      background-color: rgba(255, 255, 255, 0.5);
      display: flex;
    }

    .song_wrapper {
      width: 4rem
        /* 200/50 */
      ;
      height: 8.7rem
        /* 435/50 */
      ;
      box-sizing: border-box;
      padding: .2rem
        /* 10/50 */
      ;
      list-style: none;
      background: url('images/line.png') right center no-repeat;
      position: relative;
      overflow: auto;
    }

    .song_list li {
      font-size: .24rem
        /* 12/50 */
      ;
      color: #333;
      line-height: .72rem
        /* 36/50 */
      ;
      width: 3.6rem
        /* 180/50 */
      ;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
    }

    .song_list .active {
      color: #da651e;
    }

    .player_con {
      width: 8rem
        /* 400/50 */
      ;
      height: 8.7rem
        /* 435/50 */
      ;
      position: relative;
    }

    .disc {
      position: absolute;
      left: 1.46rem
        /* 73/50 */
      ;
      top: 1.2rem
        /* 60/50 */
      ;
      z-index: 9;
    }

    .cover {
      position: absolute;
      left: 2.5rem
        /* 125/50 */
      ;
      top: 2.24rem
        /* 112/50 */
      ;
      width: 3rem
        /* 150/50 */
      ;
      height: 3rem
        /* 150/50 */
      ;
      border-radius: 1.5rem
        /* 75/50 */
      ;
      z-index: 8;
    }

    .comment_list {
      width: 4rem
        /* 200/50 */
      ;
      height: 8.7rem
        /* 435/50 */
      ;
      box-sizing: border-box;
      padding: .2rem
        /* 10/50 */
      ;
      list-style: none;
      background: url('images/line.png') left center no-repeat;
      overflow: auto;
      position: relative;
    }

    .comment_list dl {
      padding-left: 1.1rem
        /* 55/50 */
      ;
      position: relative;
      margin-bottom: .4rem
        /* 20/50 */
      ;
    }

    .comment_list dt {
      position: absolute;
      left: .08rem
        /* 4/50 */
      ;
      top: 0px;
    }

    .comment_list dt img {
      width: .8rem
        /* 40/50 */
      ;
      height: .8rem
        /* 40/50 */
      ;
      border-radius: .4rem
        /* 20/50 */
      ;
    }

    .comment_list dd {
      font-size: .24rem
        /* 12/50 */
      ;
    }

    .comment_list .name {
      font-weight: bold;
      color: #333;
      margin-top: .1rem;
    }

    .comment_list .detail {
      color: #666;
      margin-top: .1rem;
      line-height: .36rem
        /* 18/50 */
      ;
    }

    .audio_con {
      height: 1rem;
      background-color: #f1f3f4;
      border-bottom-left-radius: .08rem
        /* 4/50 */
      ;
      border-bottom-right-radius: .08rem
        /* 4/50 */
      ;
    }

    .myaudio {
      width: 16rem
        /* 800/50 */
      ;
      height: .8rem
        /* 40/50 */
      ;
      margin-top: .1rem;
      outline: none;
      background-color: #f1f3f4;
    }

    /* 旋转的动画 */
    @keyframes Rotate {
      from {
        transform: rotateZ(0);
      }

      to {
        transform: rotateZ(360deg);
      }
    }

    /* 旋转的类名 */
    .autoRotate {
      animation-name: Rotate;
      animation-iteration-count: infinite;
      animation-play-state: paused;
      animation-timing-function: linear;
      animation-duration: 5s;
    }

    /* 是否正在播放 */
    .playing {
      animation-play-state: running;
    }

    .play_bar {
      position: absolute;
      left: 4rem
        /* 200/50 */
      ;
      top: -0.2rem;
      z-index: 10;
      transform: rotate(-25deg);
      transform-origin: .24rem
        /* 12/50 */
        .24rem
        /* 12/50 */
      ;
      transition: 1s;
    }

    /* 播放杆 转回去 */
    .play_bar.playing {
      transform: rotate(0);
    }

    .search_bar>img {
      width: .88rem
        /* 44/50 */
      ;
    }

    .disc {
      width: 5.1rem
        /* 255/50 */
      ;
    }

    .play_bar {
      width: 1.84rem
        /* 92/50 */
      ;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="play_wrap" id="player">
      <div class="search_bar">
        <img src="./images/player_title.png" alt="" />
        <input type="text" />
      </div>
      <div class="center_con">
        <div class="song_wrapper">
          <ul class="song_list">
            <li>
              BUG音悦
            </li>
          </ul>
        </div>
        <div class="player_con">
          <img src="./images/player_bar.png" class="play_bar playing" />
          <!-- 黑胶碟片 -->
          <img src="./images/disc.png" class="disc autoRotate playing" />
          <img src="./images/cover.png" class="cover autoRotate playing" />
        </div>
        <div class="comment_list">
          <div>

          </div>
        </div>
      </div>
      <div class="audio_con">
        <audio controls autoplay loop class="myaudio"></audio>
      </div>
    </div>
  </div>

  <script id="musiclis" type="text/html">
    {{each result.songs v}}
    <li data-id='{{v.id}}'>
      {{v.name}} - - {{v.artists[0].name}}
    </li>
    {{/each}}
  </script>

  <script id="comments" type="text/html">
    {{each hotComments v}}
    <dl>
      <dt>
        <img src="{{v.user.avatarUrl}}" alt="" />
      </dt>
      <dd class="name">{{v.user.nickname}}</dd>
      <dd class="detail">
        {{v.content}}
      </dd>
    </dl>
    {{/each}}
  </script>

  <script src="./lib/jquery-1.12.4.js"></script>
  <script src="./lib/template-web.js"></script>
  <script src="./lib/index.js"></script>
  <script src="./lib/flexible.js"></script>
</body>

</html>